<template>
	<!-- 项目分类 -->
	<div class="classification">
		<tableIndex
			:tableData="tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSelection="true"
			:isRadio="false"
			:height="500"
			:page="page"
			:fields="fields"
			@searchList="searchList"
			@page-change="pageChange"
		>
			<template #right-btn>
				<div style="float: right">
<!--					<el-button
						type="primary"
						style="color: #fc7018; background: #ffffff"
						@click="typeHandler('add')"
						><svg-icon
							icon-class="add-icon-1"
							class="icon-export m-r5"
						></svg-icon
						>创建分类</el-button
					>-->
					<!-- <el-button size="small" plain class="update"
						><svg-icon icon-class="export" />一键导出</el-button
					> -->
				</div>
			</template>

			<template #status="{ row }">
				<el-switch v-model="row.status" @change="statusChangeHandel(row)" />
			</template>

			<template #operate>
				<el-table-column label="操作" width="210" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="button_edit"
							@click="typeHandler('edit', row)"
							type="primary"
							>编辑</el-button
						>
						<el-button
							size="small"
							class="button_funtion2"
							@click="configurationHandler(row)"
							type="primary"
							>阶段配置</el-button
						>

<!--						<el-button
							size="small"
							class="update"
							@click="deleteHandler(row)"
							type="primary"
							><svg-icon icon-class="delete-icon"
						/></el-button>-->
					</template>
				</el-table-column>
			</template>
		</tableIndex>

		<!-- 编辑 新建 分类弹窗 -->
		<type-popover
			@getPage="getPage"
			:type="type"
			ref="typePopoverRef"
		></type-popover>

		<!-- 配置弹窗 -->
		<project-phase
			:projectTypeId="1"
			:projectId="1"
			ref="projectPhaseRef"
		></project-phase>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import TableIndex from "@/components/table/index.vue";
import { notificationApi } from "@/api/investment.js";
import { ElSwitch, ElMessageBox, ElMessage } from "element-plus";
import TypePopover from "@/views/investmentProjectManagement/taskNotification/components/TypePopover.vue";
import ProjectPhase from "@/views/investmentProjectManagement/taskNotification/components/ProjectPhase.vue";

const state = reactive({});
const page = reactive({
	page: 1,
	pageSize: 10,
	total: 0,
});
let tableData = ref([]);
const fields = ref([
	{
		key: "searchKey",
		label: "搜索内容",
		type: "input",
		placeholder: "请输入关键字",
	},
	{
		key: "status",
		label: "选择状态",
		type: "select",
		options: {
			list: [
				{ label: "停用", value: -1 },
				{ label: "启用", value: 1 },
			],
		},
	},
]);

let tableHead = ref([
	{
		prop: "typeName",
    label: "分类名称",
    minWidth: 100
	},
	{
		prop: "parentTypeName",
    label: "上级类别",
    minWidth: 100
	},
	{
		prop: "createTime",
    label: "创建时间",
    minWidth: 150
	},
	{
		prop: "remark",
    label: "备注说明",
    minWidth: 100
	},
	{
		prop: "createUserName",
    label: "创建人",
    minWidth: 100
	},
	{
		prop: "status",
		label: "启用状态",
		// formatter: (row) => {
		//   console.log(row.status);
		//   return row.status == 1 ? true : false
		// },
    slot: "status",
    minWidth: 100
	},
]);

//分页
const pageChange = (e) => {
	console.log(e);
	page.page = e.page;
	page.pageSize = e.limit;

	getPage(page);
};

//搜索接口请求
const searchList = (e) => {
	getPage(e);
};

const getPage = (e) => {
	notificationApi
		.getProjectTypePage({
			pageNum: page.page,
			pageSize: page.pageSize,
			param: e,
		})
		.then((res) => {
			if (res.code == 200) {
				tableData.value = res.data.content.map((v) => {
					v.status = v.status == 1 ? true : false;
					return v;
				});
				page.total = res.data.totalSize;
				console.log(tableData);
			}
		});
};
const typePopoverRef = ref(null);
const type = ref("");
const typeHandler = (sky, item) => {
	if (sky == "edit") {
		typePopoverRef.value.open(item.projectTypeId);
		type.value = "编辑";
	} else {
		type.value = "新建";
		typePopoverRef.value.open();
	}
};

const projectPhaseRef = ref(null);
const configurationHandler = (item) => {
	console.log(item.projectTypeId);
	projectPhaseRef.value.open(item.projectTypeId);
};

//删除
const deleteHandler = (row) => {
	ElMessageBox.confirm("确认删除吗?", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => {
			notificationApi.typeRemove(row.projectTypeId).then((res) => {
				if (res.code == 200) {
					ElMessage.success("删除成功");
					getPage();
				}
			});
		})
		.catch(() => {});
};

const statusChangeHandel = (row) => {
	console.log("---", row.status);
	const obj = {
		...row,
	};
	if (row.status) {
		obj.status = 1;
	} else {
		obj.status = -1;
	}
	notificationApi.publicTypeUpdate(obj).then((res) => {
		if (res.code == 200) {
			ElMessage.success("操作成功");
		}
	});
};

onMounted(() => {
	getPage();
});
</script>
<style lang="scss" scoped>
</style>
